<template>
    <div class="item">
        <template v-if="status == 7">
            <el-checkbox v-model="item.checked" class="text-time">{{ getTime(item.createtime * 1000) }}</el-checkbox>
        </template>
        <template v-else>
            <div v-if="userInfo && userInfo.is_bank > 0" class="text-time">
                {{ getTime(item.createtime * 1000) }}
            </div>
        </template>

        <!-- <div class="text">申请人：{{ item.name }}</div> -->
        <div v-if="userInfo && userInfo.is_bank > 0" class="text">
            上门勘点联系电话：{{ item.username }}
        </div>
        <!-- <div class="text" v-if="userInfo && userInfo.is_bank == 0">
                        银行联系电话：{{ item.bank_tel }}
                    </div> -->
        <div class="text">
            预约开户日期：{{ item.date + " " }}{{ item.times }}
        </div>
        <div class="text">开户预约银行：{{ item.bank_name }}</div>
        <div class="text">
            开户预约公司：{{ item.company_name }}
        </div>

        <div class="text">法人名称：{{ item.fa_name }}</div>
        <div class="text">法人联系方式：{{ item.fa_tel }}</div>
        <div class="text">
            申请开通账户：{{
                item.type == 1 ? "一般存款账户" : "基本存款账户"
            }}
        </div>
        <div class="text">开户年额度：{{ item.account_name }}</div>

        <!-- <div class="text">
                        开户时法人是否到场：{{
                            item.is_present == "1" ? "是" : "否"
                        }}
                    </div> -->
        <!-- <div class="text">
                        上门时法人是否在场：{{
                            item.fa_bepresent == "1" ? "是" : "否"
                        }}
                    </div> -->

        <div class="text">
            法人是否亲自办理：{{
                item.is_agent == "1" ? "是" : "否"
            }}
        </div>
        <div v-if="item.is_agent == '0'" class="text">
            经办人姓名：{{ item.jing_name }}
        </div>
        <div v-if="item.is_agent == '0'" class="text">
            经办人联系电话：{{ item.jing_tel }}
        </div>

        <!-- <div v-if="item.account_id > 1" class="text">
                        上门勘点时间：{{
                            item.visit_date + " " + item.visit_time
                        }}
                    </div> -->
        <div v-if="item.account_id > 1" class="text">
            上门勘点位置：{{ item.visit_position }}
        </div>

        <!-- <div v-if="userInfo && userInfo.is_bank == 0" class="text">
                        银行联系电话：{{ item.bank_tel }}
                    </div> -->

        <!-- <div class="text">
                        创建时间：{{ getTime(item.createtime * 1000) }}
                    </div> -->
        <div class="text-img">
            <div class="label">法定代表人身份证：</div>
            <el-image v-for="(img, imgi) in item.fa_idcard.split(',')" :key="imgi" class="img"
                style="width: 160px; height: 100px" :src="img" :preview-src-list="[img]" lazy fit="cover"></el-image>
        </div>
        <div v-if="item.is_agent == '0'" class="text-img">
            <div class="label">经办人身份证：</div>
            <el-image v-for="(img, imgi) in item.jing_idcard.split(',')" :key="imgi" class="img"
                style="width: 160px; height: 100px" :src="img" lazy :preview-src-list="[img]" fit="cover"></el-image>
        </div>
        <div class="text-img">
            <div class="label">营业执照正本：</div>
            <el-image v-for="(img, imgi) in item.business_license.split(
                ','
            )" :key="imgi" class="img" style="width: 160px; height: 100px" :src="img" :preview-src-list="[img]"
                fit="cover" lazy></el-image>
        </div>

        <div v-if="
            userInfo && userInfo.is_bank != 1 && item.status == 3 && item.transfer_voucher
        " class="text-img">
            <div class="label">转账凭证：</div>
            <el-image class="img" style="width: 160px; height: 100px" :src="item.transfer_voucher"
                :preview-src-list="[item.transfer_voucher]" lazy fit="cover"></el-image>
        </div>
        <div v-if="
            userInfo && userInfo.is_bank == 3 && item.status == 7 && item.transfer_voucher
        " class="text-img">
            <div class="label">转账凭证：</div>
            <el-image class="img" style="width: 160px; height: 100px" :src="item.transfer_voucher"
                :preview-src-list="[item.transfer_voucher]" lazy fit="cover"></el-image>
        </div>

        <div v-if="item.money && userInfo && userInfo.is_bank > 1" class="text">
            开户奖励：<span style="color: #f56c6c">￥{{ item.money }}</span>
        </div>
        <div v-if="item.status == 8 || item.status == 4" class="text">
            拒绝理由：{{
                item.open_refuse_reason
                    ? item.open_refuse_reason
                    : item.withdraw_refuse_reason
            }}
        </div>
        <div v-if="item.status == 9" class="text">
            拒绝理由：{{ item.open_refuse_reason }}
        </div>


        <div class="status" :style="{ color: getStatusColor(item) }">
            {{ getStatus(item) }}
        </div>

        <div v-if="
            userInfo &&
            item.status == 2 &&
            userInfo.is_bank == 0
        " class="buttons">
            <div class="button1 button" @click="emitEvents('lookBankTel')">
                联系银行
            </div>
            <div class="button2 button bauto" @click="emitEvents('lookYY')">
                查看开户资料
            </div>
            <!-- <el-popconfirm
                title="是否取消预约开户？"
                @confirm="cancelYY(item)"
            >
                <div slot="reference" class="button2 button">
                    取消
                </div>
            </el-popconfirm> -->
        </div>

        <div v-if="
            userInfo &&
            userInfo.is_bank == 3 &&
            (item.status == 6 ||
                item.status == 7)
        " class="buttons">
            <div v-if="isDialog" class="button2 button" @click="emitEvents('lookInfo')">
                查看资料
            </div>
            <div v-if="item.status == 7" class="button1 button" @click="emitEvents('pingzhengUpload')">
                上传转账凭证
            </div>
            <el-popconfirm v-if="item.status == 6" title="是否审核通过?"
                @confirm="emitEventsParams('bank_edit_resevation', 7)">
                <div slot="reference" class="button1 button">
                    同意
                </div>
            </el-popconfirm>
            <el-popconfirm v-if="item.status == 7" title="是否校验通过?"
                @confirm="emitEventsParams('bank_edit_resevation', 3)">
                <div slot="reference" class="button1 button">
                    同意
                </div>
            </el-popconfirm>
            <el-popconfirm title="确定拒绝？" @confirm="emitEventsParams('jujue', 8)">
                <div slot="reference" class="button2 button">
                    拒绝
                </div>
            </el-popconfirm>
        </div>

        <div v-if="
            userInfo &&
            item.status == 6 &&
            userInfo.is_bank == 0
        " class="buttons">
            <el-popconfirm title="是否取消预约开户？" @confirm="emitEventsParams('bank_edit_resevation', 10)">
                <div slot="reference" class="button2 button">
                    取消
                </div>
            </el-popconfirm>
        </div>

        <div v-if="
            userInfo &&
            item.status == 10 &&
            item.user_id == userInfo.id
        " class="buttons">
            <div class="button1 button bauto" @click="emitEvents('sqTX')">
                申请提现
            </div>
        </div>

        <div v-if="
            userInfo &&
            item.status == 8 &&
            userInfo.is_bank == 0
        " class="buttons">
            <div class="button2 button" style="width: 128px" @click="emitEvents('cxTX')">
                重新提现
            </div>
        </div>

        <div v-if="
            userInfo &&
            item.status == 9 &&
            userInfo.is_bank == 0
        " class="buttons">
            <div class="button2 button" style="width: 128px" @click="emitEvents('goFrom')">
                重新提交
            </div>
        </div>

        <div v-if="item.status == 3 && userInfo && userInfo.is_bank == 0" class="buttons">
            <div class="button1 button" style="width: 128px" @click="emitEvents('lookBankTel')">
                联系银行
            </div>
        </div>

        <div v-if="
            userInfo &&
            item.status == 1 &&
            item.user_id == userInfo.id
        " class="buttons">
            <div class="button1 button" @click="emitEvents('lookBankTel')">
                联系银行
            </div>
            <el-popconfirm title="是否取消预约开户？" @confirm="emitEvents('cancelYY')">
                <div slot="reference" class="button2 button">
                    取消预约
                </div>
            </el-popconfirm>
        </div>

        <div v-if="
            userInfo &&
            item.status == 1 &&
            userInfo.is_bank > 0
        " class="buttons">
            <div class="button1 button" @click="emitEvents('xiugai')">
                修改时间
            </div>
            <div class="button1 button" @click="emitEvents('showEdit')">
                同意
            </div>
            <el-popconfirm title="是否取消该预约单？" @confirm="emitEventsParams('jujue', 9)">
                <div slot="reference" class="button2 button">
                    拒绝
                </div>
            </el-popconfirm>
        </div>

        <div v-if="
            userInfo &&
            item.status == 2 &&
            userInfo.is_bank > 0
        " class="buttons">
            <div class="button2 button" @click="emitEvents('showEdit')">
                修改开户资料
            </div>
            <div class="button1 button" @click="emitEventsParams('bank_edit_resevation', 10)">
                完成开户
            </div>
            <el-popconfirm title="确认取消?" @confirm="emitEventsParams('jujue', 9)">
                <div slot="reference" class="button2 button">
                    取消
                </div>
            </el-popconfirm>
        </div>

        <div v-if="
            userInfo &&
            item.status == 5
        " class="buttons">
            <div v-if="isDialog && userInfo.is_bank != 1" class="button2 button" @click="emitEvents('lookInfo')">
                查看资料
            </div>
            <el-popconfirm v-if="userInfo.is_bank == 0" title="确认取消?"
                @confirm="emitEventsParams('bank_edit_resevation', 10)">
                <div slot="reference" class="button1 button">
                    取消
                </div>
            </el-popconfirm>
            <el-popconfirm v-if="userInfo.is_bank == 2" title="是否已核对提现信息?"
                @confirm="emitEventsParams('bank_edit_resevation', 6)">
                <div slot="reference" class="button1 button">
                    同意
                </div>
            </el-popconfirm>
            <el-popconfirm v-if="userInfo.is_bank == 2" title="确定拒绝？" @confirm="emitEventsParams('jujue', 8)">
                <div slot="reference" class="button2 button">
                    拒绝
                </div>
            </el-popconfirm>
        </div>

    </div>
</template>

<script>
import {
    getTime,
    goTopSmooth,
    isCurrentTimeBeforeGivenTime,
    isToday,
    parseDate,
    parseDateTime,
    getTime2,
} from "@/assets/utils/utils.js";

import { mapState, mapActions } from "vuex";
export default {
    name: 'myOpenItem',
    props: {
        item: {
            type: Object,
            default: () => {
                return {}
            }
        },
        status: {
            type: Number | String,
            default: 0
        },
        isDialog: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            getTime: getTime,


            getStatusColor: function (item) {
                switch (item.status) {
                    case 1:
                        return "#22C653";
                    case 2:
                        return "#F23737";
                    case 3:
                        return "#1C87F3";
                    case 4:
                        return "#666666";
                    case 5:
                        return "#F23737";
                    case 6:
                        return "#F23737";
                    case 7:
                        return "#F23737";
                    case 8:
                        return "#F23737";
                    case 9:
                        return "#F23737";
                    case 9:
                        return "#1288FF";
                }
            },
            getStatus: function (item) {
                // if (this.userInfo && this.userInfo.is_bank == 1 && [3, 5, 6, 7, 8, 10].indexOf(item.status) !== -1) {
                //     return '已完成'
                // }
                // if (this.userInfo && this.userInfo.is_bank == 3 && item.status == 6) {
                //     return '已审核'
                // }
                // if (this.userInfo && this.userInfo.is_bank == 3 && item.status == 7) {
                //     return '已校验'
                // }
                switch (item.status) {
                    case 1:
                        return "进行中";
                    case 2:
                        return "预约成功";
                    case 3:
                        return "已完成";
                    case 4:
                        return "已取消";
                    case 5:
                        return "提现中";
                    case 6:
                        return "已审核"; // 已审核
                    case 7:
                        return "已校验"; // 已校验
                    case 8:
                        return "提现失败";
                    case 9:
                        return "预约失败 ";
                    case 10:
                        return "待提现 ";
                }
            },
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    mounted() { },
    methods: {
        // 联系银行
        lookBankTel(item) {
            this.$emit('lookBankTel', item)
        },

        lookYY(item) {
            this.$emit('lookYY', item)
        },

        emitEvents(emitName) {
            this.$emit('emitEvents', emitName, this.item)
        },

        emitEventsParams(emitName, params) {
            this.$emit('emitEventsParams', emitName, this.item, params)
        },
    },
};
</script>

<style lang="scss" scoped>
.item {
    margin-bottom: 10px;
    width: 766px;
    // height: 240px;
    background: #ffffff;
    box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.05);
    padding: 25px 34px 40px;
    position: relative;

    .text-time {
        font-weight: 700;
        font-size: 18px;
        color: #1c87f3;
        line-height: 26px;
        padding-bottom: 10px;
    }

    .text-img {
        display: flex;
        margin-bottom: 15px;

        .label {
            width: 144px;
        }

        .img {
            margin-right: 20px;
        }
    }

    .name {
        font-weight: 500;
        font-size: 20px;
        color: #333333;
        padding-bottom: 14px;
    }

    .text {
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        padding-bottom: 10px;
    }

    .status {
        font-weight: 500;
        font-size: 20px;
        position: absolute;
        right: 65px;
        top: 25px;
    }

    .button-o {
        width: 124px;
        height: 40px;
        line-height: 40px;
        background: #1c87f3;
        border-radius: 10px;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        position: absolute;
        right: 47px;
        bottom: 21px;
    }

    .buttons {
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        position: absolute;
        right: 47px;
        bottom: 21px;
        display: flex;
        align-items: center;

        .button1 {
            padding: 0 18px;
            background: #1c87f3;
            border-radius: 10px;
            height: 40px;
            line-height: 40px;
            margin-left: 17px;
        }

        .button2 {
            padding: 0 18px;
            background: #ff8c2e;
            border-radius: 10px;
            height: 40px;
            line-height: 40px;
            margin-left: 17px;
        }

        .button3 {
            padding: 0 18px;
            background: #E9EAEB;
            border-radius: 10px;
            height: 40px;
            line-height: 40px;
            margin-left: 17px;
        }

        .bauto {
            width: auto !important;
            padding-left: 10px !important;
            padding-right: 10px !important;
        }
    }
}

.button {
    user-select: none;
    cursor: pointer;

    &:hover {
        opacity: 0.9;
    }

    &:active {
        opacity: 0.8;
    }
}
</style>